<template lang="">
    <div class="count">
        <!-- 模板里面可以看到vc身上的所有的东西 -->
       <h1>当前求和：{{$store.state.sum}}</h1>
       <select v-model.number="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2">3</option>
       </select>
       <button @click="increment">+</button>
       <button @click="decrement">-</button>
       <button @click="incrementOdd">当前求和为奇数再加</button>
       <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
    export default {
        name:"Count",
        data(){
            return{
                number:1,//用户选择的数字
                sum:0,//当前的和
            }
        },
        mounted() {
            console.log(this)
        },
        methods: {
            increment(){
                // this.$store.dispatch('addFun',this.number)
                this.$store.commit('addFun',this.number)
            },
            decrement(){
                // this.$store.dispatch('subtractFun',this.number)
                this.$store.commit('subtractFun',this.number)
            },
            incrementOdd(){
                this.$store.dispatch('addOddFun',this.number)
            },
            incrementWait(){
                this.$store.dispatch('addWaitFun',this.number)
            }
        },
    }
</script>
<style lang="less" scoped>
    button{
        margin: 5px;
    }
</style>